<template>
  <div class="login" id="particles-js">
    <div class="title-name">人间且慢行</div>
    <div class="login-form-wrap">
      <a-form class="formStyle" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" @pressEnter="onSubmit">
        <a-form-item label="用 户 名 ">
          <a-input v-model:value="form.username"/>
        </a-form-item>
        <a-form-item label="密 码 ">
          <a-input v-model:value="form.password" type="password" @pressEnter="onSubmit"/>
        </a-form-item>
        <!-- <a-form-item label="验 证 码 ">
          <div style="display: flex;align-items: center;justify-content: flex-start">
            <a-input v-model:value="form.verify_code" @pressEnter="onSubmit"/>
            <img :src="verify" alt="" style="margin-left: 25px">
          </div>
        </a-form-item> -->
        <div style="display: flex; align-items: center; justify-content: center; margin-top: 20px;">
          <a-button class="btn" type="primary" @click="onSubmit">
            立即登录
          </a-button>
        </div>
      </a-form>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { message } from "ant-design-vue"
import { login } from '../../assets/api/user'
export default defineComponent({
  setup () {
    const router = useRouter()
    const data = reactive({
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      verify: undefined,
      form: {
        username: '',
        password: '',
      }
    })
    const onSubmit = () => {
      if(!data.form.username) {
        message.warn('请输入用户名！')
        return
      }
      if(!data.form.password) {
        message.warn('请输入密码！')
        return
      }
      
      login(data.form).then(res => {
        console.log(res,'sdsdd')
        try {
          if(res.code === 200) {
            window.localStorage.setItem('token', res.data.userinfo.token)
            router.push('/')
          }
        } catch (error) {
          console.log(error,'sdfsdf')
        }
        
      }).catch(err => {
        console.log(err,'sdfsfsssssssssss')
      })
    }
    return {
      ...toRefs(data),
      onSubmit,
      // updateRoute
    }
  }
})
</script>
<style lang="less" scoped>
.login {
  position: relative;
  height: 100vh;
  background: #4dcec0 url('https://test-qfx.oss-cn-beijing.aliyuncs.com/images/map.png') no-repeat;
  background-size: 100% 100vh;
  background-position: center;
  &-mask {
    height: 100%;
    background-size: 100% 100%;
  }
  .title-name{
    width: 400px;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -80%);
    font-size: 36px;
    color: #fff;
    font-weight: bold;
  }
  &-form-wrap {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -65%);
    min-width: 420px;
    max-width: 500px;
    min-height: 400px;
    background-color: transparent;
    border-radius: 10px;
    .formStyle{
      padding: 60px 40px 40px;
      background: #fff;
      box-shadow: 0 4px 20px 0 rgba(0,0,0,0.2);
      border-radius: 10px;
    }

    .title {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: #fff;
    }
  }
}

::v-deep(.ant-form) {
  margin-top: 40px;
}

::v-deep(.ant-form-item-label label) {
  color: #333;
}
::v-deep(.ant-input){
  background: transparent !important;
  color: #333;
  border: 1px solid #d9d9d9;
}
.btn {
  background: #4dcec0;
  font-size: 14px;
  border-radius: 4px;
}
</style>